/* pages/cate/cate.wxss */
page{
    height: 100vh;
    width: 100vw;
}
.category-container{
    position: fixed;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    ::-webkit-scrollbar {
        width: 0;
        height: 0;
        color: transparent;
      }
    .cateparentBox1{
        position: relative;
        .sub-topbar-container{
            height: 80rpx;
            display: flex;
            align-items: center;
            background: #e3e3ff;
            .topsubBox{
                position: absolute;
                top: 15rpx;
                display: flex;
                flex-direction: row;
                align-items: center;
                .topbar-item{
                    width: 200rpx;
                    height: 50rpx;
                    border-radius: 50rpx;
                    display: flex;
                    margin-right: 10rpx;
                    align-items: center;
                    justify-content: center;
                    font: 500 22rpx "Microsoft yahei";
                    color: red;
                    letter-spacing: 2rpx;
                    background: #e3e3ff;
                  //   background-color: rgba($color: #ff0000, $alpha: 0.1);
                    border: 1px solid red;      
                  }
            }
            
        }
    }
    .cateparentBox2{
        height: 94%;
        display: flex;
        .leftcontainer{
            width: 200rpx; 
            height: 100%;
            background: #e3e3ff;
            .category-left-view{
             height: 100%;
             width: 100%;
             .left-view-item{
                 height: 85rpx;
                 width: 100%;
                 display: flex;
                 font: 500 22rpx "Microsoft yahei";
                 letter-spacing: 1rpx;
                 align-items: center;
                 justify-content: center;
             }
             .actived{
                 color: red;
                 background: #f3f4f7;
                 font:500 28rpx "microsoft yahei";
             }
         }
         }
         .rightcontainer{
             width: 550rpx;
             height: 100%;
             background: #f3f4f7;
             .rightbottonContainer{
                 height: 100%;
                 width: 100%;
                 background: #f3f4f7;
                 display: flex;
                 align-items: center;
                 padding: 10rpx;
                 box-sizing: border-box;
                 .category-right-view{
                     height: 100%;
                     .category-rightbottonItem{ 
                        //  padding: 10rpx;
                         box-sizing: border-box;
                         background: white;
                         margin-bottom: 10rpx;;
                         .cateTitle{
                             width: 100%;
                             margin: 0 0 10rpx 0;
                             height: 60rpx;  
                             display: flex;
                             padding-left: 20rpx;
                             box-sizing: border-box;
                             letter-spacing: 2rpx;
                             font: 500 22rpx "Microsoft yahei";
                             align-items: center;
                         }
                         .secBox::after{content: '';width: 30%;}
                         .secBox{
                              box-sizing: border-box;
                              display: grid;
                              grid-template-columns: repeat(auto-fill,175rpx);
                              height: 100%;
                              width: 100%;
                              justify-content:space-evenly;
                              flex-wrap: wrap;
                              .secItem{
                                  height: 175rpx;
                                  width: 175rpx;
                                  display: flex;
                                  justify-content: center;
                                  align-items: center;
                                  view{
                                    .threecateimg{
                                        height: 130rpx;
                                        width: 130rpx;
                                        padding: 2rpx;
                                        border-radius: 10rpx;
                                        box-sizing: border-box;
                                        background-color: #e3e3ff;
                                        .cateImgbody{
                                          height: 130rpx;
                                          width: 130rpx;
                                        }
                                    } 
                                    .threecateName{
                                       height: 40rpx;
                                       width: 130rpx;
                                       display: flex;
                                       font: 500 18rpx "Microsoft yahei";
                                       letter-spacing: 1rpx;
                                       align-items: center;
                                       justify-content: center;
                                   } 
                                  }

                              }
                         }
                     }
                 }
             }
             
     
         }
    }
}

